/**
 * 模拟下拉列表
 * 结构: 
 * <div id=''>
 *    <span class='vmenu-arrow'></span>
 *    <span class='vmenu-value'></span>
 *    <div class='vmenu-wrap'>
 *    		<ul>
 *    			<li val='value'>...</li> //li的val属性值是结果值
 *    		</ul>
 *    </div>
 * </div>
 * @param 
 * options = {
 * 		speed: 200, //slide speed
 * 		onchange: function(value){
 * 			//on change callback
 * 		}
 * }
 * @author tanggf 
 */
(function($){	
	$.fn.moviemenu = function(options){		
		if( typeof options == "string" ){
			var vm = _get_(this[0]);
			if(vm){
				vm.change(options);
			}			
			return this;
		}
		
		options = $.extend({
			speed: 200,
			onchange: function(){				
			}
		}, options);
		
		return this.each(function(){			
				_get_(this, options);	
		});
		
		function _get_(ele, options){
			var vm = $(ele).data("moviemenu");
			if( ! vm && options){
				vm = new _Moviemenu_(ele, options);
				$(ele).data("moviemenu", vm);
			}
			return vm;
		}
	};
	
	function _Moviemenu_(ele, options){
		this.$this = $(ele);
		this.options = options;
		this._init_();
	}
	
	_Moviemenu_.prototype = {
		_init_: function(){
			var $this = this.$this;
			var options = this.options;
			this.$atuoleft = $this.children("span.auto-bg-box").children("span.auto-bg-left");
			this.$autobg = $this.children("span.auto-bg-box").children("span.auto-bg");
			this.$value = $this.children("span.auto-bg-box").children("span.auto-bg").children("div.browse-show");
			this.$wrap = $this.children("span.auto-bg-box").children("span.auto-bg").children("div.show-block");
			this.$li = $this.children(".auto-bg-box");
			
			var self = this;			
			
			this.$li.click(function(){		
				self.$wrap.slideToggle(options.speed);	
		
			});			
			
	
			$("body").click(function(event){
				if(event.target != self.$value[0] && event.target != self.$autobg[0] && event.target != self.$atuoleft[0]){
					self.$wrap.slideUp(options.speed);
				}				
			});		
			
		}

		
	};
})(jQuery);